<script setup>
import {useRouter,useRoute} from "vue-router";
import VideoApi from "@/api/VideoApi.js";
import {onMounted, reactive} from "vue";
import {ElMessage} from "element-plus";
import VideoCollectedSvg from "@/components/svg/VideoCollectedSvg.vue";
import VideoUnCollectSvg from "@/components/svg/VideoUnCollectSvg.vue";
import CollectionApi from "@/api/CollectionApi.js";
const router = useRouter()
const route = useRoute()
const toPlay = (id)=>{
  router.push(`/play/${id}`)
}
const state = reactive({
  videoInfo:{
    category:{}
  },
  isDoCollected:true
})

const getVideoInfo = ()=>{

  VideoApi.getVideoInfo(route.params.videoCode).then(res=>{
    state.videoInfo = res.data
    state.videoInfo.category = res.data.category
  })
}
onMounted(()=>{
  getVideoInfo()
})

/**
 * 收藏视频
 * @param status 1 收藏 2 取消收藏
 */
const handleCollect = (status)=>{
  let collectDto = {videoCode:state.videoInfo.videoCode,status:status}
  CollectionApi.doCollect(collectDto).then(res=>{
    if (!res.flag){
      ElMessage.error(res.message)
      return
    }
    ElMessage.success(status===1?'收藏成功':'取消收藏')
    state.videoInfo.isCollected = status===1
  })
}
</script>
<template>
  <el-row class="detail-container">
    <span class="bg"
          :style="{backgroundImage:`url(${state.videoInfo.videoCover})`}"></span>
    <el-col :span="5" class="video-cover">
      <el-image class="cover" :src="state.videoInfo.videoCover"/>
    </el-col>
    <el-col :span="12" class="video-info">
      <div>
        <h2 class="video-name">{{state.videoInfo.videoName}}</h2>
        <el-descriptions column="1" style="--el-fill-color-blank:transparent;margin-top: 10px">
<!--          <el-descriptions-item label="状态:">更新至12集</el-descriptions-item>-->
          <el-descriptions-item label="主演:">{{state.videoInfo.actor&& state.videoInfo.actor.length>0?state.videoInfo.actor.join('/'):''}}</el-descriptions-item>
          <el-descriptions-item label="导演:">{{state.videoInfo.director&& state.videoInfo.director.length>0?state.videoInfo.director.join('/'):''}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions column="3" style="--el-fill-color-blank:transparent">
<!--          <el-descriptions-item label="年份:">2023</el-descriptions-item>-->
          <el-descriptions-item label="地区:">{{state.videoInfo.area}}</el-descriptions-item>
          <el-descriptions-item label="类型:">{{state.videoInfo.category.categoryName}}</el-descriptions-item>
          <el-descriptions-item label="时长:">内详</el-descriptions-item>
          <el-descriptions-item label="上映:">{{state.videoInfo.releaseTime}}</el-descriptions-item>
          <el-descriptions-item label="语言:">{{state.videoInfo.language}}</el-descriptions-item>
<!--          <el-descriptions-item label="更新:">2023-11-12 18:59</el-descriptions-item>-->
        </el-descriptions>
      </div>
      <div style="display:flex;align-items: center">
        <VideoCollectedSvg @click="handleCollect(2)" v-show="state.videoInfo.isCollected" class="svg"/>
        <VideoUnCollectSvg @click="handleCollect(1)" v-show="!state.videoInfo.isCollected" class="svg"/>
        <el-button round style="width: 30%;font-size: 16px;color: white"
                   size="large" color="#f6aab4"
        @click="toPlay(state.videoInfo.videoCode)"
        >立即观看</el-button>
      </div>
    </el-col>
    <el-col :span="6" class="video-rate">
      <div style="display: flex;align-items: center;justify-content: space-between">
      <div class="rate-left">
        <p class="score" >{{state.videoInfo.rate}}</p>
        <p style="display: flex;flex-direction: column;align-items: center">
          <span style="font-size: 20px;font-weight: 600;color: white">网友评分</span>
          <el-rate size="small" allow-half :model-value="state.videoInfo.rate" disabled/>
        </p>
      </div>
      <p style="color: white;font-size: 14px;letter-spacing: 1px">
        611次评分
      </p>
      </div>
      <div style="display: flex;flex-direction: column;align-items: center">
        <el-rate size="large"
                 :texts="['很差', '较差', '还行', '推荐', '力荐']"
                 show-text
                 allow-half
        ></el-rate>
        <p style="color:white;font-size: 14px">我也来给影片评分</p>
      </div>
    </el-col>
  </el-row>

</template>


<style scoped lang="less">
.detail-container {
  display: flex;
  justify-content: center;
  padding: 50px calc(10%) 20px calc(10%);
  //background: 0 0;
}

.bg {
  position: absolute;
  top: -10%;
  left: -10%;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  background-position-y: 50%;
  filter: blur(100px) saturate(180%);
}

.video-cover {
  .cover {
    border-radius: 10px;
    //color: transparent;
  }
}

.video-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 10px 15px;
  .video-name {
    font-size: 28px;
    color: #fff;
  }
}

.video-rate {
  margin-top: 60px;
  height: 60%;
  background-color: rgba(255, 255, 255, .1);
  padding: 40px 20px;
  border-radius: 12px;
  //filter: blur(5px);
  .rate-left{
    display: flex;
    .score{
      letter-spacing: 2px;
      font-size: 40px;
      //transform: translateY(-20px);
      font-weight: 600;
      color: white;
    }
  }
}

:deep(.el-descriptions__label) {
  margin-right: 5px;
  color: rgba(255, 255, 255, .6);
}

:deep(.el-descriptions__content) {
  color: rgba(255, 255, 255, .8);
}
.svg{
  width: 36px;
  height: 36px;
  margin-right: 5px;
  cursor: pointer;
}
</style>